<script setup lang="ts">
  import { IconSearch, IconPlus } from '@arco-design/web-vue/es/icon';
  import { useForm } from '@/hooks/arco/useForm';
  import { queryInstDeptList } from '@/api/organization/department';
  import { useSkeleton } from '@/hooks/arco/useSkeleton';
  import useModeModalHandler from '@/hooks/arco/useModeModalHandler';
  import Detail from './edit.vue';

  const coverData = (data: any[]) => {
    data.forEach((e) => {
      if (e.subDeptList && e.subDeptList.length > 0) {
        e.children = e.subDeptList;
        coverData(e.children);
      }
    });
  };

  const view = useSkeleton({
    apiFun: queryInstDeptList,
    onSuccess(data) {
      coverData(data);
      return data;
    },
  });

  const columns = [
    {
      title: '部门ID',
      dataIndex: 'deptId',
    },
    {
      title: '部门名称',
      dataIndex: 'name',
    },
    {
      title: '部门人数',
      dataIndex: 'members',
      align: 'center' as const,
      render: ({ record }: any) => {
        return record.members || '0';
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
    },
    {
      title: '操作',
      align: 'center' as const,
      dataIndex: 'action',
      slotName: 'action',
    },
  ];

  const searchForm = useForm({
    state: {
      name: '',
      status: '',
    },
  });

  const editModal = useModeModalHandler({
    onSuccess() {
      view.execute({
        name: searchForm.state.name,
      });
    },
  });

  // const deleteDept = (record: any) => {};
</script>

<template>
  <div class="flex flex-col">
    <!-- <div class="flex">
      <a-form class="flex-1" v-bind="searchForm.bindProps" label-align="left">
        <a-row :gutter="16">
          <a-col :span="8">
            <a-form-item field="name" label="部门名称" label-col-flex="60px">
              <a-input
                v-model="searchForm.state.name"
                placeholder="请输入部门名称"
                allow-clear
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div class="mb-[20px] flex">
        <a-divider direction="vertical" />
        <a-button type="primary" @click="view.retry()">
          <template #icon>
            <icon-search />
          </template>
          查询
        </a-button>
      </div>
    </div>

    <a-divider margin="0" /> -->
    <div class="flex justify-between mt-[10px]">
      <a-space>
        <a-button type="primary" @click="editModal.showAdd()">
          <template #icon>
            <icon-plus />
          </template>
          新建
        </a-button>
      </a-space>
    </div>

    <SkeletonView v-slot="{ data }" v-bind="view.bindProps">
      <a-table
        :columns="columns"
        :data="data"
        :bordered="false"
        :pagination="false"
        row-key="deptId"
        show-empty-tree
        class="mt-3"
      >
        <template #action="{ record }">
          <ae-button
            purpose="view"
            v-bind="editModal.openBtn('detail', record)"
          >
            查看
          </ae-button>
        </template>
      </a-table>
    </SkeletonView>

    <Detail v-bind="editModal.bindProps" />
  </div>
</template>

<style lang="less" scoped></style>
